import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';
import 'package:travel/routes/index.dart';
import 'package:travel/screen/flutter_screenutil.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/radian.dart';
import 'package:travel/utils/styles.dart';
import 'package:travel/utils/tools.dart';

class PublishController extends GetxController {
  RxString title = ''.obs;

  RxString content = ''.obs;

  RxList<XFile> imgs = RxList([]);

  RxBool ok = RxBool(false);
}

class PublishView extends GetView<PublishController> {
  const PublishView({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
          backgroundColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF7f7),
          appBar: AppBar(
            automaticallyImplyLeading: true,
            leading: Center(
              child: TextButton(
                  onPressed: Get.back,
                  child: Text(
                    '取消',
                    style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                  )),
            ),
            leadingWidth: 60.w,
            actions: [
              InkWell(
                onTap: Get.back,
                child: Container(
                    margin: EdgeInsets.only(right: 15.w),
                    width: 60.w,
                    height: 30.h,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(15.h),
                        //linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%)
                        gradient: LinearGradient(colors: [
                          ColorsUtils.rgba(52, 120, 246, 1),
                          ColorsUtils.rgba(2, 167, 240, 1)
                        ], stops: const [
                          0,
                          0.99
                        ], transform: GradientRotation(RadianUtils.angleToRadian(90)))),
                    child: Text(
                      '发布',
                      style: StylesUtils.customTextStyle(),
                    )),
              )
            ],
          ),
          body: SingleChildScrollView(
            padding: EdgeInsets.symmetric(horizontal: 15.w, vertical: 10.h),
            child: Column(
              children: [
                Row(
                  children: [
                    InkWell(
                      onTap: () async {
                        List<XFile> imgs = await ToolsUtils.loadGalleryImage();
                        if (imgs.isNotEmpty) {
                          controller.imgs.addAll(imgs);
                        }
                      },
                      child: Container(
                        width: 70.w,
                        height: 70.h,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(1),
                            color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF5f5)),
                        child: Icon(
                          Icons.camera_alt_rounded,
                          size: 20.w,
                          color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc),
                        ),
                      ),
                    ),
                    Expanded(
                        child: Container(
                      alignment: Alignment.topLeft,
                      padding: EdgeInsets.only(left: 5.w),
                      child: Text(
                        '上传图片或视频能让更多人看到你的点评哦~',
                        style: StylesUtils.customTextStyle(
                            fontSize: 15.sp, color: ColorsUtils.colorCccc, lineHeight: 1.5.h),
                      ),
                    ))
                  ],
                ),
                Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5.w),
                      color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2)),
                  padding: EdgeInsets.symmetric(horizontal: 5.w, vertical: 5.h),
                  margin: EdgeInsets.symmetric(vertical: 10.h),
                  child: TextField(
                    // 新增保持光标一直在文字最后
                    controller: ToolsUtils.editingController(controller.title.value),
                    cursorRadius: const Radius.circular(2),
                    cursorColor: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                    keyboardType: TextInputType.multiline,
                    maxLength: 30,
                    maxLengthEnforcement: MaxLengthEnforcement.enforced,
                    autofocus: false,
                    minLines: 1,
                    textAlign: TextAlign.left,
                    textInputAction: TextInputAction.none,
                    style:
                        StylesUtils.customTextStyle(color: ColorsUtils.color3333, fontSize: 15.sp),
                    buildCounter: (
                      BuildContext context, {
                      required int currentLength,
                      required int? maxLength,
                      required bool isFocused,
                    }) {
                      return Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          Text(
                            '$currentLength',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorD900, fontSize: 12.sp),
                          ),
                          Text(
                            '/$maxLength',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999, fontSize: 12.sp),
                          ),
                        ],
                      );
                    },
                    decoration: InputDecoration(
                      hintText: '请输入标题',
                      hintMaxLines: 1,
                      hintStyle: StylesUtils.customTextStyle(
                          color: ColorsUtils.colorCccc,
                          fontSize: 18.sp,
                          fontWeight: FontWeight.w700),
                      contentPadding: EdgeInsets.symmetric(horizontal: 5.w, vertical: 5.h),
                      border: InputBorder.none,
                      isDense: true,
                      enabledBorder: const UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.transparent)),
                      focusedBorder: const UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.transparent)),
                    ),
                    onChanged: (String text) {
                      controller.title.value = text;
                    },
                  ),
                ),
                Container(
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5.w),
                      color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2)),
                  padding: EdgeInsets.all(10.w),
                  child: TextField(
                    // 新增保持光标一直在文字最后
                    controller: ToolsUtils.editingController(controller.content.value),
                    cursorRadius: const Radius.circular(2),
                    cursorColor: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                    keyboardType: TextInputType.multiline,
                    maxLength: 500,
                    maxLengthEnforcement: MaxLengthEnforcement.enforced,
                    autofocus: false,
                    maxLines: 20,
                    minLines: 5,
                    textAlign: TextAlign.left,
                    textInputAction: TextInputAction.none,
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color3333, fontSize: 15.sp, lineHeight: 1.5.h),
                    buildCounter: (
                      BuildContext context, {
                      required int currentLength,
                      required int? maxLength,
                      required bool isFocused,
                    }) {
                      return Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          Text(
                            '$currentLength',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorD900, fontSize: 12.sp),
                          ),
                          Text(
                            '/$maxLength',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999, fontSize: 12.sp),
                          ),
                        ],
                      );
                    },
                    decoration: InputDecoration(
                      hintText: '请详细分享你的真实体验、使用攻略或者一些小贴士...',
                      hintMaxLines: 2,
                      hintStyle: StylesUtils.customTextStyle(
                          color: ColorsUtils.color9999, fontSize: 15.sp, lineHeight: 1.5.h),
                      contentPadding: EdgeInsets.zero,
                      border: InputBorder.none,
                      isDense: true,
                      enabledBorder: const UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.transparent)),
                      focusedBorder: const UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.transparent)),
                    ),
                    onChanged: (String text) {
                      controller.content.value = text;
                    },
                  ),
                ),
                Container(
                  margin: EdgeInsets.symmetric(vertical: 15.h),
                  height: 55.h,
                  child: Row(
                    children: [
                      Container(
                        width: 30.w,
                        alignment: Alignment.centerLeft,
                        child: ToolsUtils.assetImageSvg('u1063.svg', width: 15.w, height: 18.h),
                      ),
                      Expanded(
                          child: Container(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '故宫博物馆',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: 16.sp),
                        ),
                      )),
                      Container(
                        width: 20,
                        alignment: Alignment.centerRight,
                        child: IconButton(
                            onPressed: () {
                              Get.toNamed(RoutePath.map);
                            },
                            icon: Icon(
                              Icons.arrow_forward_ios,
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                              size: 14.sp,
                            )),
                      )
                    ],
                  ),
                ),
                Container(
                  alignment: Alignment.centerLeft,
                  child: Row(
                    children: [
                      Checkbox(
                          value: controller.ok.value,
                          splashRadius: 8.w,
                          shape: const OvalBorder(),
                          side: BorderSide(
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3478)),
                          activeColor: ColorsUtils.parseColorFromHexString(ColorsUtils.color3478),
                          onChanged: (bool? value) {
                            controller.ok.value = value!;
                          }),
                      Text(
                        '我已阅读并同意',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color6666, fontSize: 12.sp),
                      ),
                      TextButton(
                          onPressed: () {},
                          child: Text(
                            '《内容上传协议》',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color3478, fontSize: 12.sp),
                          ))
                    ],
                  ),
                )
              ],
            ),
          ),
        ));
  }
}
